day 9 html區塊<div> <footer>

2024 iThome 鐵人賽

DAY 9

Modern Web

html跟css神奇的化學反應系列第 9 篇

16th鐵人賽

lxylim

團隊NUTC imac

2024-09-17 09:16:36

92 瀏覽

分享至

今天就繼續昨天的文章吧~

body

第一個説的是body，我是把body與<div>是連在一起的，div是一種元素作爲html中其他元素的容器。而且div沒有必需的屬性，主要搭配一起用的是<style>，<class>和<id>，就好像

<div class="test"></div>
<div id="example"></div>
<div style="background-color:black"></div>

或者三個都寫一起也是可以的

<div class="test" id="example" style="background-color:black"></div>

也就是這樣，但我們一般如果是想用以上的去寫的話會變成

.test{
    background-color : black;   //這是寫在css裏的
}

<div class="test" id="example"></div>   //這是寫在html裏面

.test是會讓css自動去跟div裏面的class去連接的，這樣才不會顯得太長和簡潔。而且可以在設計網頁的時候可以利用不同div來實現不錯好看的頁面。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>貨單</title>
    <style>
        body{
            background-color: rgba(38, 97, 83, 0.447);
            color: rgba(255, 255, 255, 0.795);
            padding: 6%;
        }
        .container{
            background-color: rgb(46, 126, 126);
            color: beige;
            padding: 6%;
        }
        .example{
            background-color: rgb(81, 26, 132);
            color: rgb(167, 223, 223);
            padding: 6%;
        }

    </style>
</head>
<body>
    <h1>這是最外面</h1>
    <div class="container">
        <h2>這是第一個div</h2>
        <div class="example">
            <p>這是div裏包的第二個div</p>
        </div> 
    </div>
</body>
</html>

這是我的程式碼，我的網頁就會呈現這樣

但如果把padding拿走的話，就會變成了這樣

其實這一些都可以透過css去改變，我這邊給一個網站可以供大家看看
網址：https://www.w3schools.com/html/html_div.asp

Footer

接下來就説説footer吧，footer主要是寫在文件或者網頁的頁尾，當然你也可以用div去設計自己的頁尾，主要第一張圖片只是告訴大家設計網頁的話可以參考并利用，也可以更容易完善一個網頁。這一次呢我就拿discord網頁來跟大家説吧，大家可以直接搜尋discord頁面拉到最下面應該就可以看到跟我圖片一樣的東西啦

這個是可以利用footer去寫的，也可以讓人一目瞭然的看到這是頁面的最後了，而且很多網頁設計也是使用一樣的方式去寫的